<template>
  <div class="index">
    <a-skeleton :animation="true" :loading="loading">
      <a-space direction="vertical" :style="{ width: '100%' }" size="large">
        <a-skeleton-line :rows="5" />
        <a-skeleton-shape />
      </a-space>
    </a-skeleton>
    <a-layout>
      <a-layout-sider
        ref="left"
        class="overflow-y-auto h-dvh"
        :resize-directions="['right']"
        :style="{ minWidth: '200px', maxWidth: '80%' }"
        :width="siderWidth"
        :on-moving-end="moveEnd"
        :on-moving="moving"
      >
        <LeftSider :path="path" />
      </a-layout-sider>
      <a-layout-content ref="right" class="overflow-y-auto h-dvh">
        <RightContext />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import LeftSider from '@/view/layout/LeftSider.vue'
import RightContext from '@/view/layout/RightContext.vue'
import { onMounted, ref } from 'vue'

const path = localStorage.getItem('app')
const loading = ref(true)
/**
 * ----自定义树控件与右侧内容区宽度 start----
 */
const left = ref<HTMLDivElement | null>(null)
const right = ref<HTMLDivElement | null>(null)

//
const siderWidth = ref<number>(0)
// const siderHeight = ref<number>(0);

const moveWidth = ref<number>(0)
const moveHeight = ref<number>(0)
const moving = function (
  size: { width: number, height: number },
  ev: MouseEvent,
) {
  moveWidth.value = size.width
  moveHeight.value = size.height
}
const moveEnd = function (e: MouseEvent) {
  localStorage.setItem('siderWidth', String(moveWidth.value))
  console.log('save size =>', left, e, moveWidth.value, moveHeight.value)
}

// /**
//  * 存档的左侧树宽度
//  */
const leftWidth = localStorage.getItem('siderWidth')

onMounted(() => {
  // 恢复设置为记忆的树空间宽度
  loading.value = false
  if (leftWidth) {
    console.log('onMounted left', leftWidth)
    siderWidth.value = Number.parseInt(leftWidth)
  }
})
</script>

<style scoped>
.index {
  width: 100%;
  height: 100%;
}
</style>
